<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">性别统计</div>
          <div id="genderChart" style="height: 400px"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div slot="header">职位统计</div>
          <div id="jobChart" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card>
          <div slot="header">部门统计</div>
          <div id="deptChart" style="height: 400px"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div slot="header">入职年份统计</div>
          <div id="yearChart" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'

export default {
  name: 'EmpStatistics',
  mounted() {
    this.loadStatistics()
  },
  methods: {
    async loadStatistics() {
      try {
        const res = await axios.get('/api/emps/statistics/detail')
        const data = res.data.data

        this.renderGenderChart(data)
        this.renderJobChart(data)
        this.renderDeptChart(data)
        this.renderYearChart(data)
      } catch (err) {
        console.error('加载员工统计失败', err)
      }
    },

    renderGenderChart(data) {
      const chart = echarts.init(document.getElementById('genderChart'))
      const option = {
        title: {
          text: '性别比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '10%',
          left: 'center'
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            radius: '50%',
            data: [
              { value: data.maleCount, name: '男' },
              { value: data.femaleCount, name: '女' }
            ]
          }
        ]
      }
      chart.setOption(option)
      window.addEventListener('resize', () => chart.resize())
    },

    renderJobChart(data) {
      const chart = echarts.init(document.getElementById('jobChart'))
      const jobNames = Object.keys(data.jobStats)
      const jobValues = Object.values(data.jobStats)

      const option = {
        title: {
          text: '职位分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: jobNames
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: jobValues,
            barWidth: '60%',
            itemStyle: {
              color: '#91cc75'
            }
          }
        ]
      }
      chart.setOption(option)
      window.addEventListener('resize', () => chart.resize())
    },

    renderDeptChart(data) {
      const chart = echarts.init(document.getElementById('deptChart'))
      const deptNames = Object.keys(data.deptStats)
      const deptValues = Object.values(data.deptStats)

      const option = {
        title: {
          text: '部门分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: deptNames
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            data: deptValues,
            barWidth: '60%',
            itemStyle: {
              color: '#fac858'
            }
          }
        ]
      }
      chart.setOption(option)
      window.addEventListener('resize', () => chart.resize())
    },

    renderYearChart(data) {
      const chart = echarts.init(document.getElementById('yearChart'))
      const years = Object.keys(data.entryYearStats)
      const yearValues = Object.values(data.entryYearStats)

      const option = {
        title: {
          text: '入职年份变化',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: years
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人数',
            type: 'line',
            data: yearValues,
            itemStyle: {
              color: '#73c0de'
            }
          }
        ]
      }
      chart.setOption(option)
      window.addEventListener('resize', () => chart.resize())
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
